<template>
  <Modal
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      :title="props.title"
      :visible="props.visible"
      width="30%"
      @cancel="onClose"
  >
    <Form
        ref="formRef"
        :model="form"
        autocomplete="off"
        layout="vertical"
    >
      <Row :gutter="16">
        <Col :span="24">
          <FormItem v-show="type === 'add'" label="主题名称" name="topicName">
            <Input
                v-model:value="form.topicName"
                placeholder="Please enter user topicName"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="24">
          <FormItem v-show="type === 'edit'" label="主题URN"
                    name="topicUrn">
            <Input
                v-model:value="topicUrn"
                disabled
                placeholder="Please enter user topicUrn"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="24">
          <FormItem label="显示名" name="displayName">
            <Input
                v-model:value="form.displayName"
                placeholder="Please enter user displayName"
            />
          </FormItem>
        </Col>
      </Row>
    </Form>

    <template #footer>
      <Space>
        <Button @click="onClose">取消</Button>
        <Button type="primary" @click="onSub">提交</Button>
      </Space>
    </template>
  </Modal>
</template>
<script lang="ts" setup>
import {Button, Col, Form, FormItem, Input, message, Modal, Row, Space} from 'ant-design-vue';
import {form} from '/@/views/maintenance-center/message-theme/components/topic';
import {computed, ref} from 'vue';
import {
  changeDisplayName,
  createOrUpdateTopic
} from '/@/api/maintenance-center/message-notification/messageNotification';


const formRef = ref();
const props = defineProps({
  visible: Boolean,
  drawerType: String,
  title: String,
  URN: String
});
// 通知父组件修改值
let type = computed(() => props.drawerType)
let topicUrn = computed(() => props.URN)
const emits = defineEmits(['closeDrawer'])
const onClose = () => {
  formRef.value.resetFields()
  emits('closeDrawer')
};
const onSub = async () => {
  formRef.value.validate();
  if (props.drawerType === 'add') {
    await createOrUpdateTopic(form).then(() => {
      message.success('创建成功')
      onClose()
    }).catch((e) => {
      message.error('创建失败：' + e.response.data.msg)
    })
  } else {
    const param = {
      topicUrn: props.URN,
      newName: form.displayName
    }
    await changeDisplayName(param).then(() => {
      message.success('修改显示名成功')
      onClose()
    }).catch((e) => {
      message.error('修改显示名失败：' + e.response.data.msg)
    })
  }


}
</script>
